<!--
 * @Author: your name
 * @Date: 2021-12-21 18:52:18
 * @LastEditTime: 2024-01-04 17:14:55
 * @LastEditors: sunli
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /etrip-ui/src/pages/datePicker/demo.vue
-->
<template>
  <div>
    <button @click="defaultCom">默认</button>
    <button @click="maxAndMinCom">最大值-最小值</button>
  </div>

  <DatePicker ref="defaultRef"></DatePicker>
  <DatePicker ref="maxAndMinRef" v-model="maxAndMinModel" :maxDate="new Date()" :minDate="new Date('1900/01/01')"></DatePicker>
</template>

<script setup>
import { ref } from 'vue';
import { DatePicker } from '../../../packages/lib/index-es'

const defaultRef = ref()
const defaultCom = () => {
  defaultRef.value.show()
}

const maxAndMinRef = ref()
const maxAndMinModel = ref('1920-02-22')
const maxAndMinCom = () => {
  maxAndMinRef.value.show()
}
</script>

<style scoped lang="scss">
</style>
<style lang="scss" scoped>
.example-list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 2rem;

  .example-item {
    background-color: white;
    padding: 0.8rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
    text-align: center;
    margin-bottom: 1rem;
    flex: 1;

    &.placeholder {
      visibility: hidden;
      height: 0;
      margin: 0;
      padding: 0;
    }
  }
}
</style>